import React, { Component } from 'react'
import './MyTab.scss'
export default class MyTab extends Component {
  constructor(){
    super()
    this.state={
        tabIndex:0
    }
  }
  getTabLayout(){
    switch(this.state.tabIndex){
        case 0:
            return <h1>热卖布局</h1>
        case 1:
            return <h1>推荐布局</h1>
        case 2:
            return <h1>潮流潮流</h1>
        case 3:
            return <h1>时尚布局</h1>

    }
  }
  render() {
    return (
      <div className='box'>
         <div className='title'>
            {
                this.props.tabs.map((item,index)=><div key={index} onClick={()=>{
                    this.setState({tabIndex:index})
                }}>{this.props.render?this.props.render(item):item}</div>)
            }
         </div>
         <div>
            {
                this.getTabLayout()
            }
         </div>
      </div>
    )
  }
}
